<template>
  <div class="wrap">
    <div class="container">
      <i @click="returnEvt"></i>
      <h2>身份验证</h2>
      <div class="ipt-item">
        <!-- <label for="telphone">请输入您的账号或手机号</label> -->
        <p>账号<span>{{info.id}}</span>正在重置密码,确认为本人操作完成以下验证</p>
        <p>验证码发送到手机号码<span>{{info.phone}}</span>,若手机号码已更换,请联络系统管理员</p>
        <input
          type="text"
          v-model="vdtCode"
          id="vdtCode"
          placeholder="输入验证码"
        />
        <button @click="getVdtcode">获取验证码({{time}}s)</button>
      </div>
      <div class="process">
        <p>2/4</p>
      </div>
      <van-button block @click="nextEvt">下一步</van-button>
    </div>
  </div>
</template>

<script setup>
import { Toast } from "vant";
import { reactive, ref, watch } from "vue";
import { useRouter } from 'vue-router';
import Ajax from '../../apis/Ajax'
import { VDT_CODE_URL }from '../../config/url.config'
import { deCodeApi } from "../../utils";

const router = useRouter()
const vdtCode=ref('')
const next=ref(false)
const time=ref(10)
const timer=ref(null)
let info=reactive({})
info=JSON.parse(deCodeApi(sessionStorage.getItem('userInfo')))
// var telphone=JSON.parse(sessionStorage.getItem('forget-phone'))
// console.log(telphone)
function returnEvt(){
    router.push('/forget')
}
function getVdtcode(){
   let timer=setInterval(function(){
    time.value--
    if(time.value<=0){
      clearInterval(timer)
      if(time.value==0){
        time.value=10
      }
    }
  },1000)
    let result=Ajax({
        url: VDT_CODE_URL,
        data:{phone:info.phone}
    }).then(d=>{
        if(d.code===200){
            Toast.success('验证码为'+d.data.vdtCode)
            sessionStorage.setItem('d',JSON.stringify(d))
            vdtCode.value=d.data.vdtCode
            // console.log(d)
        }
        else if(d.code!=200){
            // console.log(d)
            Toast.fail(d.message)
        }
    })
}
watch(
 vdtCode ,
 function(newValue,oldValue){
  // console.log(newValue,oldValue)
  let d=JSON.parse(sessionStorage.getItem('d'))
  // // console.log(d)
  // console.log(vdtCode.value)
  // console.log(d.data.vdtCode)
  // console.log(vdtCode.value)
        if(vdtCode.value===d.data.vdtCode)
        {
            next.value=true
        }
        else{
            next.value=false
        }
})
function nextEvt(){
    if(next.value){
        router.push('/setPassword')
    } 
    else{
      Toast.fail('验证码输错啦')
    }
    // console.log(next.value)
}

</script>

<style lang="less" scoped>
@col1:rgb(192, 187, 187);
.wrap {
  width: 100%;
  height: 100%;
  background: url(../../images/wel.webp) no-repeat;
  background-size: 100% 100%;
  position: relative;
  .container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 100px 45px 0px;
    .process{
        height: 10vh;
        overflow: hidden;
            p {
                color: @col1;
                width: 100%;
                text-align: center;
                font-size: .7rem;
                margin: 3vh auto;
            }
    }
    i{
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    background: url('../../images/return.png') center center / 36px 36px no-repeat;
    margin-bottom: 2vh ;
    }
    h2 {
      color: white;
      margin-bottom: 40px;
      font-weight: normal;
    }
    .ipt-item {
      color: @col1;
      margin-bottom: 40px;
      font-size: 16px;
      p{
        color: @col1;
        width: 100%;
        text-align: left;
        font-size: .7rem;
        margin: 5vh auto;
        span{
            color: rgb(95, 95, 224);
            padding: 1vw;
        }
      }
      label {
        display: block;
        margin-bottom: 10px;
      }
      input {
        display: inline-block;
        width: 36vw;
        background: rgba(0, 0, 0, 0);
        border: none;
        border-bottom: 1px solid #fff;
      }
      button{
        margin-top: 1vh;
        margin-left: 5vw;
        border: none;
        width: 33vw;
        height: 4vh;
        background-color: rgb(235, 80, 80);
        color: rgb(216, 211, 211);
        font-size: .7rem;
      }
    }
    .van-button {
      background: rgb(228, 41, 41);
      border: none;
      color: @col1;
      border-radius: 5px;
      margin-bottom: 40px;
    }
  }
}
</style>